<template>
  <div>
    <div class="MembershipDetails">
        <div class="topBgView">
        <div class="top-bg">
            <div class="left-p">
                <div class="left-p-bg">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585132765502&di=d68abde323ca96ff1d81e8f82e7424a3&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F4b90f603738da977d4f1a49ab351f8198718e3a1.jpg" class="userImg"/>
                </div>
            </div>
             <div class="right-p">
                 <div class="infoBg">
                 
                        <div class="itemView">
                            <p class="titleText">美发/保险</p>
                            <img class="info-icon" />
                        </div>
                        <div class="itemView">
                            <span class="nameText">刘德华</span>
                            <span class="nameText" style="font-size: 12px; margin-top: 2px;">创始人</span>
                        </div>
                        <div class="itemView">
                            <span class="titleText">13583337465</span>
                            <img class="info-icon" style=""/>
                        </div>
                        
                        <div class="itemView">
                            <span class="titleText">hahhaha@qq.com</span>
                            <img class="info-icon" style=""/>
                        </div>
                        <div class="itemView">
                            <span class="titleText">公司地址</span>
                            <img class="info-icon" style=""/>
                        </div>

                 </div>


            </div>
        </div >
            <div style=" display: flex; justify-content: center;">
                <p style="font-size: 14px;color: rgb(172, 173, 174);">展开全部名片信息</p>
                <img src="../assets/down.png" style="width: 20px;height: 20px;">
            </div>
            <div style="margin-top:10px">
                <p class="yellowBtn">保存到通讯录</p>
                <p class="yellowBtn">和TA交换名片</p>
            </div>
            <ul class="list">
                <li class="listItem">
                   <div class="userIcon"></div> 
                </li>
                 <li class="listItem">
                   <div class="userIcon"></div> 
                </li>
                 <li class="listItem">
                   <div class="userIcon"></div> 
                </li>
                <li class="listItem">
                   <div class="userIcon"></div> 
                </li>
            </ul>
            <div class="bottomView">
                <span style="font-size:15px;color:rgb(172, 173, 174); margin-left: 25px;">250人浏览</span>
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585132765502&di=d68abde323ca96ff1d81e8f82e7424a3&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F4b90f603738da977d4f1a49ab351f8198718e3a1.jpg" class="itemIcon"/>
                <div class="rightView">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585132765502&di=d68abde323ca96ff1d81e8f82e7424a3&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F4b90f603738da977d4f1a49ab351f8198718e3a1.jpg" class="itemIcon"/>
                <p style="font-size: 14px; color:rgb(172, 173, 174);">靠谱250</p>
                </div>
            </div>            
        </div>
            <div style="margin-top:10px">
                 <tab active-color="#D3A042">
                <tab-item selected @on-item-click="onItemClick(1)"  >企业介绍</tab-item>
                <tab-item @on-item-click="onItemClick(2)">成功案例</tab-item>
                <tab-item @on-item-click="onItemClick(3)">GAINS表</tab-item>
                </tab> 
            </div>        
            <div v-show="showTab == 1" class="tabBg">1</div>
            <div v-show="showTab == 2" class="tabBg">2</div>
            <div v-show="showTab == 3" class="tabBg">3</div>

    </div>
  </div>
</template>
<script>
import { Tab , TabItem} from 'vux'

export default {
name: 'MembershipDetails',
  data () {
    return {
        showTab: 1

    }
  },
  components: {
        Tab,
        TabItem
  },
  methods: {
       onItemClick (index) {
        this.showTab = index
    //   console.log('on item click:', index)
    },
 
  }
}
</script>

<style scoped>  
    .topBgView {
        width: 100%;
        height: 360px;
        padding-top: 1px;
        /* margin-top: 0px; */
        background-color: white;
    }
    .top-bg {
        width: 95%;
        height: 200px;
        margin: 10px;
        /* background-color: yellow; */
        overflow:hidden;
        /* border-top-left-radius: 8px;
         */
        border-radius: 8px;
        box-shadow:2px 2px 5px #909090;
    }
    .left-p {
        /* 平行四边形 */
        width: 200px;
        height: 200px;
        margin-left: -30px;
        display: inline-block;
        background: white;
        transform: skew(-17deg);
        overflow:hidden;
        box-shadow:2px 2px 5px #909090;
	}
    .right-p {
        width: 200px;
        height: 200px;
        background:white;
        float: right;
        margin-right: -30px;
        transform: skew(-17deg);
        box-shadow:2px 2px 5px #909090;
    }
    .infoBg {
        margin-right: 48px;
        /* background-color: yellow; */
        text-align: right;
        transform: skew(17deg);
    }
    .left-p-bg {
        transform: skew(17deg);

    }
    .titleText {
        font-size: 14px;
        display: inline-block;
        /* float: right; */
        /* margin-left: 40px; */

        color: rgb(172, 173, 174);
    }
    .info-icon {
        width: 20px;
        height: 20px;
        /* float: right; */
        margin-top: 10px;
        vertical-align: center;
        background-color: yellow;
    }
    .nameText {
        font-size: 18px;
        margin-top: 10px;
        margin-left: 40px;
        float: right;
        color: rgb(172, 173, 174);
    }
    .itemView {
        /* display: flex; 
        justify-content: center; */
    }
    .yellowBtn {
      background-color:  rgb(238, 194, 109);
      width: 40%;
      height: 30px;
      font-size: 14px;
      margin-left: 25px;
      color:white;
      padding-top: 10px;
      text-align:center;
      display: inline-block;
      border-radius: 5px;

  }
  .userIcon {
      width: 30px;
      height: 30px;
      background-color: violet;
      border-radius: 5px;

  }
  .list {
      margin-top: 10px;
      margin-left: 25px;
      width: 100%;
      height: 30px;
      display: flex;
      flex-direction: row;
  }
    .bottomView {
        /* height: 20px; */
        margin-top: 5px;
        width: 100%;
        /* display: flex; */
        /* flex-direction: row; */
    }
  .listItem {
      width: 40px;
      height: 40px;
  }

 .itemIcon {
        margin-left: 10px;
        height: 20px;
        width: 20px;
        padding-bottom: 10px;
        vertical-align: top;
    }
 .rightView {
     float: right;
    margin-top: -30px;
    margin-right: 15px;
 }
 .userImg {
     width: 100%;
     height: 100%;
 }


</style>